<template>
	<div class="card card-chart" style="padding-bottom: 0">
		<div class="box-title title-medium">
			{{ (state as Chart).title }}
		</div>
		<div class="box_total"></div>
		<div :id="(state as Chart).id" style="width: 100%; height: 286px"></div>
	</div>
</template>

<script setup lang="ts">
import { Chart, useChart } from '/@/hooks/chart';

const props = withDefaults(defineProps<{ state: object | Chart }>(), {
	state: () => ({}),
});

// const props = defineProps({
// 	// 图表参数
// 	state: {
// 		type: Object as Chart,
// 		required: true,
// 	},
// });

useChart(props.state as Chart);
</script>

<style scoped lang="scss">
$boxHeight: 272px;
$boxGap: 20px;

.card {
	////避免盒子断裂成两部分
	//break-inside: avoid;

	padding: 24px;
	//margin-right: $boxGap;
	//margin-bottom: $boxGap;
}

.title-medium {
	line-height: 22px !important;
	font-weight: 500 !important;
}

.card-total {
	height: calc((#{408px} - #{$boxGap}) / 2);
	.card_total_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		img {
			height: 30px;
			width: 30px;
		}
	}

	& > div:nth-child(2) {
		margin-top: 4px;
		margin-bottom: 24px;
		font-size: 26px;
		font-weight: 600;
		text-align: left;
		color: #39404d;
		line-height: 32px;
	}

	& > div:nth-child(4) {
		margin-top: 16px;
		font-size: 14px;
		font-weight: 400;
		text-align: left;
		color: #646b80;
		line-height: 20px;
	}

	& > div:nth-child(5) {
		margin-top: 4px;
		font-size: 14px;
		font-weight: 400;
		text-align: left;
		color: #646b80;
		line-height: 20px;
	}
}

.card-chart {
	min-height: $boxHeight;
	height: 100%;

	.box_total {
		height: 32px;
		margin: 8px 0 4px 0;
		font-size: 26px;
		font-weight: 600;
		text-align: left;
		color: #39404d;
		line-height: 32px;
	}

	//进图条内容
	.progress_content {
		width: 100%;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 81px;

			& > span {
				min-width: 80px;
				text-align: center;
			}

			& > .el-progress {
				width: 100%;
				height: 16px;
			}

			.progress_content_right {
				min-width: 108px;
				margin-left: 20px;
				div {
					width: 100%;
					font-size: 12px;
					font-weight: 400;
					text-align: left;
					color: #646b80;
					line-height: 17px;
				}
				div:nth-child(2) {
					font-size: 14px;
					line-height: 16px;
					font-weight: 600;
					margin-top: 2px;
				}
			}
		}
	}

	.pie_position {
		width: 100%;
		min-height: 72px;
		background: #f7f9fc;
		padding: 8px 12px;
		padding-bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;

		.pie_position_flex {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.item {
			padding: 0 8px 8px;
			display: flex;
			justify-items: center;
			align-items: flex-start;

			i {
				display: block;
				min-width: 8px !important;
				max-width: 8px !important;
				height: 8px;
				border-radius: 2px;
				margin-right: 4px;
				margin-top: 3px;
			}

			span {
				// height: 14px;
				font-size: 12px;
				font-weight: 400;
				text-align: left;
				color: #646b80;
				line-height: 14px;
				// margin-right: 16px;
			}
		}
	}
}
</style>
